<!--  -->
<template>
  <div>
   <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
        <!-- 添加分类按钮区 -->
        <el-row>
            <el-col :span="9">
                <el-button type="primary">添加角色</el-button>
            </el-col>
        </el-row>

        <!-- 表格区域 -->
        <tree-table :data="cateList"
         :columns="columns" 
         :selection-type="false"
         :expand-type="false"
         show-index
         border
         >
            <template slot="isok" slot-scope="scope">
                <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:green"></i>
                <i class="el-icon-error" v-else style="color:red"></i>    
            </template>
         </tree-table>
    </el-card>
  </div>
</template>


<script>
export default {
  data () {
    return {
        //保存商品分类的数据
        cateList:[],
        //查询条件
        queryInfo:{
            type:3,
            pagenum:1,
            pagesize:5
        },
        //数据总条数
        total: 0,
        //指定列的定义
       columns: [
            {
                label: '分类名称',
                prop: "cat_name"
            },
            {
                label:"是否有效",
                //将当前列定义为模板列，可以插入作用域插槽
                type:'template',
                //使用模板名称
                template:'isok',
                prop: "cat_level"
            }
        ]
    };
  },

  //获取商品列表
  created() {
    this.getCateList()
  },

  methods: {
      //获取商品数据
      async getCateList() {
          const { data:res } = await this.$http.get("categories",{params:this.queryInfo})
          if(res.meta.status !== 200) return this.$message.error("获取商品信息失败！")
          //把数据赋值到cateList
          this.cateList = res.data.result
          //汇总数据条数
          this.total = res.data.total
          console.log(res.data.result)
      }
  },

  
}

</script>
<style lang='scss' scoped>
</style>